<template>
  <div id="app">
    <button @click="getData">点击发送数据请求</button>
    <p>{{ message }}</p>

    <button @click="getData2">点击发送多个数据请求</button>
    <p>{{ content1 }}</p>
    <p>{{ content2 }}</p>

    <button @click="getData3">使用封装的axios发送请求</button>

    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script>
// import axios from "axios";

import request from "./network/request"


// axios的全局配置
// axios.defaults.baseURL = "https://api.vvhan.com";
// axios.defaults.method = "post";
// axios.defaults.timeout = 2000;

// 创建axios的实例
// const axiosInstance = axios.create({
//   baseURL: "https://api.vvhan.com",
//   method: "get",
//   timeout: 5000,
// });

// const axiosInstance2 = axios.create({
//   baseURL: "https://api.thecatapi.com",
//   method: "get",
//   timeout: 2000,
// });


// ajax({
//   type:"get",
//   url:"http://",
//   data:{

//   },
//   success:function(res){
//     console.log(res);
//   }
// })

export default {
  data() {
    return {
      message: "",
      content1: "",
      content2: "",
    };
  },
  methods: {
    getData() {
      axiosInstance2({
        // 请求的接口地址
        url: "/v1/images/search?size=full",
      }).then((res) => {
        console.log(res);
        // this.message = res.data.data.content;
      });
    },
    getData2() {
      // 并发请求：必须保证所有请求都成功才能得到最后的请求结果，
      // 一旦有一个请求出错，其他请求也无法返回请求数据
      axios.all([
          axiosInstance({
            url: "/api/horoscope",
            // 传参
            params: {
              type: "scorpio",
              time: "today",
            },
          }),
          axiosInstance({
            url: "/api/horoscope",
            // 传参
            params: {
              type: "gemini",
              time: "today",
            },
          }),
        ])
        // 方法一：返回值res是一个数组，所有请求到的数据都放在数组中
        // .then(res=>{
        //   console.log(res);
        //   this.content1=res[0].data.data.fortunetext;
        //   this.content2=res[1].data.data.fortunetext;
        // })
        // 方法二：使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
        .then(
          axios.spread((res1, res2) => {
            console.log(res1);
            console.log(res2);
          })
        );
    },
    getData3(){
      request({
        url:"/api/horoscope123",
        params:{
          type:"scorpio",
          time:"today"
        }
      }).then(res=>{
        console.log("xxxx",res);
      })
    }
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
